<template>

  <div>

    <div style="display: flex;justify-content: space-between">
      <div>
        <el-radio-group v-model="radio">
          <el-radio label="1">添加营销任务中终端</el-radio>
          <el-radio label="2">添加未规划终端</el-radio>
        </el-radio-group>

      </div>

      <div style="margin-bottom: 20px">
        <el-button
            class="main-btn"
            size="small"
            type="primary"
            @click="terminalClick"
        >添加终端
        </el-button>

        <el-button
            class="main-btn"
            size="small"
            type="primary"
            @click="allRemoved"
        >全部移除
        </el-button>
      </div>
    </div>

    <div>

      <el-table
          :data="tableData"
          border
          header-cell-class-name="table-header"
          max-height="350px"
           size="small"
      >
        <el-table-column type="index"/>
        <el-table-column
            align="left"
            header-align="center"
            label="终端名称"
            min-width="150px"
            show-overflow-tooltip
        >
          <template #default="scope">

            <!--                        <el-popover-->
            <!--                                v-if="scope.row.errorStatus || scope.row.isRepeat"-->
            <!--                                placement="top-start"-->
            <!--                                :width="200"-->
            <!--                                trigger="hover"-->
            <!--                        >-->
            <!--                            <span v-if="scope.row.errorStatus">{{ errMap[scope.row.errorStatus] }}</span>-->
            <!--                            <span v-else>终端已添加</span>-->

            <!--                            <template #reference>-->
            <!--                                <el-icon style="margin-left: 10px">-->
            <!--                                    <info-filled />-->
            <!--                                </el-icon>-->
            <!--                            </template>-->
            <!--                        </el-popover>-->

            <span>{{ scope.row.terminalName }}</span>

          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="所在地区"
            min-width="100px"
            prop="area"
            show-overflow-tooltip
        />
        <el-table-column
            align="center"
            header-align="center"
            label="准入模式"
            width="100px"
        >
          <template #default="scope">
            {{ getLabel('access_mode', scope.row.accessMode) }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="终端价(元)"
            width="100px"
        >
          <template #default="scope">
            {{ scope.row.terminalPrice }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="开发期限至"
            width="100px"
        >
          <template #default="scope">
            <span v-if="scope.row.expireTime">{{ dateFormat('yyyy-mm-dd', scope.row.expireTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="开发保证金(元)"
            width="130px"
        >
          <template #default="scope">
            <span v-if="scope.row.devEarnestMoney">{{ scope.row.devEarnestMoney }}</span>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="最低销量"
            width="150px"
        >
          <template #default="scope">
            <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{
                getLabel('sell_unit', datas.sellUnit)
              }}/{{ getLabel('sell_num_unit', scope.row.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            header-align="center"
            label="销量保证金(元)"
            width="150px"
        >
          <template
              #default="scope"
              width="100px"
          >
            <span v-if="scope.row.sellEarnestMoney">{{ scope.row.sellEarnestMoney }}</span>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            fixed="right"
            header-align="center"
            label="操作"
            width="150px"
        >
          <template #default="scope">
            <el-button
                v-if="scope.row.noPlan"
                type="text"
                @click.stop="onEdit(scope)"
            >编辑
            </el-button>
            <el-button
                type="text"
                @click.stop="onRemoved(scope)"
            >移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

  </div>

  <add-plan-termina-dialog
      ref="terminaDialog"
      :agent-product="agentProduct"
      :area="area"
      :list="tableData"
      @confirm="appConfirm"
  />

  <add-terminal-dialog
      ref="appDialog"
      :list="tableData"
      :props-product="datas"
      @confirm="(data) => {appConfirm([data])}"
  />

  <edit-termina-dialog
      ref="editDialog"
      :props-product="datas"
      @confirm="onConfirm"
  />

</template>

<script>
import {computed, defineAsyncComponent, defineComponent, getCurrentInstance, reactive, toRefs} from 'vue'

export default defineComponent({
  name: "terminalView",
  components: {
    addTerminalDialog: defineAsyncComponent(
        () => import('./addTerminalDialog.vue')
    ),
    editTerminaDialog: defineAsyncComponent(
        () => import('./editTerminaDialog.vue')
    )
  },
  props: {
    datas: {
      type: Object,
      default: {}
    },
    list: {
      type: Array,
      default: []
    },
    area: {
      type: Array,
      default: []
    },
  },
  setup(props, {emit}) {
    const currentInstance = getCurrentInstance()
    var data = reactive({
      radio: '1',
      agentProduct: {
        productId: 0,
        region: [],
        headId: '',
        areaSelectType: true,
        terminalType: '',
      },
      appDialog: null,
      editDialog: null,
      terminaDialog: null,
    })

    var tableData = computed({
      get() {
        return props.list
      },
      set(val) {
        emit('update:list', val)
        return props.list
      }
    })

    const terminalClick = () => {
      console.log(props.datas)
      if (!props.datas.productId || !props.datas.headId || !props.datas.terminalType || !props.datas.region.length) {
        currentInstance.proxy.customMessage({type: 'error', message: '请先完善基本信息'})
        return
      }
      if (data.radio == 1) {
        data.agentProduct.productId = props.datas.productId
        data.agentProduct.headId = props.datas.headId
        data.agentProduct.terminalType = props.datas.terminalType
        data.agentProduct.region = props.datas.region
        data.terminaDialog.openDialog()
      } else {
        data.appDialog.openDialog()
      }
    }

    const allRemoved = () => {
      tableData.value = tableData.value.splice(0,tableData.value.length)
    }

    const appConfirm = (list) => {
      let arr = []
      console.log(list)
      list.forEach(a => {
        if (data.radio == 2) {
          a.noPlan = true
        }
        arr.push(a)
        tableData.value.push(a)
      })
      // console.log(arr)
      // tableData.value = tableData.value.concat(arr)
      console.log(tableData.value)
    }

    const onEdit = (scope) => {
      data.editDialog.openDialog(scope.row)
    }

    const onRemoved = (scope) => {
      tableData.value.splice(scope.$index, 1)
    }

    const onConfirm = (val) => {
      const index = tableData.value.findIndex(
          (a) => a.terminalId == val.terminalId
      )
      if (index != -1) {
        tableData.value[index] = val
      }
    }

    const validata = () => {
      return new Promise((resolve, reject) => {
        if (tableData.value.length) {
          resolve()
        } else {
          currentInstance.proxy.customMessage({type: 'error', message: '请添加终端信息'})
          reject()
        }
      })
    }

    return {
      ...toRefs(data),
      tableData,

      terminalClick,
      allRemoved,
      appConfirm,
      onConfirm,
      onEdit,
      onRemoved,
      validata,
    }
  }
})
</script>

<style scoped>

</style>
